<template>
  <div
    :style="computedStyles"
    class="drop-indicator" :class="[orientationClass, edgeClass]"
  />
</template>

<script setup>
import { computed, defineProps } from 'vue'

const props = defineProps({
  edge: {
    type: String,
    required: true,
  },
  gap: {
    type: String,
    required: true,
  },
})

const strokeSize = 3
const terminalSize = 10
const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2

const computedStyles = computed(() => {
  const lineOffset = `calc(-0.5 * (${props.gap} + ${strokeSize}px))`

  return {
    '--line-thickness': `${strokeSize}px`,
    '--line-offset': `${lineOffset}`,
    '--terminal-size': `${terminalSize}px`,
    '--terminal-radius': `${terminalSize / 2}px`,
    '--negative-terminal-size': `-${terminalSize}px`,
    '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
  }
})

const edgeToOrientationMap = {
  top: 'horizontal',
  bottom: 'horizontal',
  left: 'vertical',
  right: 'vertical',
}

const orientationClass = computed(() => {
  const orientation = edgeToOrientationMap[props.edge]
  return `orientation-${orientation}`
})
const edgeClass = computed(() => {
  return `edge-${props.edge}`
})
</script>

<style scoped>
.drop-indicator {
  position: absolute;
  z-index: 10;
  background-color: rgb(var(--primary-color));
  pointer-events: none;
}

.drop-indicator::before {
  content: '';
  width: var(--terminal-size);
  height: var(--terminal-size);
  position: absolute;
  border-width: var(--line-thickness);
  border-style: solid;
  border-color: rgb(var(--primary-color)); /* Tailwind's border-blue-700 */
  border-radius: 50%;
  box-sizing: border-box;
}

.orientation-horizontal {
  height: var(--line-thickness);
  left: var(--terminal-radius);
  right: 0;
}

.orientation-horizontal::before {
  left: var(--negative-terminal-size);
}

.orientation-vertical {
  width: var(--line-thickness);
  top: var(--terminal-radius);
  bottom: 0;
}

.orientation-vertical::before {
  top: var(--negative-terminal-size);
}

.edge-top {
  top: var(--line-offset);
}

.edge-top::before {
  top: var(--offset-terminal);
}

.edge-right {
  right: var(--line-offset);
}

.edge-right::before {
  right: var(--offset-terminal);
}

.edge-bottom {
  bottom: var(--line-offset);
}

.edge-bottom::before {
  bottom: var(--offset-terminal);
}

.edge-left {
  left: var(--line-offset);
}

.edge-left::before {
  left: var(--offset-terminal);
}
</style>
